<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    div > div {
        width: 200px;
        height: 200px;
        margin: 30px;
    }

    #ctn {
        border: 1px solid black;
        /*overflow: hidden;*/
        /*display: flow-root;*/
        /*position: absolute;*/
        /*position: fixed;*/
    }

    #first {
        background-color: aqua;
        float: left;
    }

    div:nth-of-type(2) {
        background-color: palegreen;
        float: right;
    }

    div:nth-of-type(3) {
        background-color: orangered;
        float: left;
        /*clear: both;*/
    }

    img {
        width: 300px;
        float: left;
    }

    p:nth-of-type(1) {
        width: 800px;
    }
</style>
<body>
<main>
    <!--    《一 定义》-->
    <!--    float CSS 属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。-->
    <!--    该元素从网页的正常流动（文档流）中移除，尽管仍然保持部分的流动性（与绝对定位相反）。-->

    <!--    《二 效果》-->
    <!--    对元素设置float属性，会同时对三个元素造成影响：-->
    <!--    1.自身脱离标准文档流，按照指定方向移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。-->
    <!--    2.后一个元素顶替它原先在文档流的位置-->
    <!--    3.其父元素失去它的高度，如果父元素只有它一个子元素，则高度为0-->
    <!--    *4.如果后一个元素为P标签，会导致文字环绕-->
    <div id="ctn">
        <div id="first"></div>
        <div></div>
        <div></div>
    </div>

    <br><br>

    <!--    <img src="/img/ayaka.jpg" alt="">-->
    <!--    <p>-->
    <!--        神里绫华，米哈游出品的游戏《原神》及其衍生作品中的角色，稻妻“社奉行”神里家的大小姐。容姿端丽，品行高洁。绫华贵为“公主”，平日主理家族内外事宜。-->
    <!--        绫华常出现在社交场合，与民间交集也较多。因此，更被人们熟悉的她反而获得了高于兄长的名望，被雅称为“白鹭公主”。-->
    <!--        众所周知，神里家的女儿绫华小姐容姿端丽、品行高洁，是深受民众钦慕的人物-->
    <!--    </p>-->

</main>
</body>
</html>